<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-31 10:10:56
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-02-01 15:37:04
 * @FilePath: /health-gpt-website/src/views/News/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="newsPage">
    <Nav />
    <div class="winBox">
      <div class="winBox_son">
        <div class="mainBox">
          <div class="contentBox">
            <div class="content">
              <div
                v-for="(item, index) in newsData"
                :key="index"
                class="newsItem"
                @click="jumpToDetail(item.id)"
              >
                <img :src="item.bgImg" />
                <div class="titleBox">
                  <div class="newsTitle">{{ item.title }}</div>
                  <img src="../../assets/icon/arrow-right.png" />
                </div>
                <div class="newsItem_line"></div>
                <div class="newsItem_content">
                  {{ item.content }}
                </div>
                <div class="newsItem_time">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footerClass">
        <Footer />
      </div>
    </div>
  </div>
</template>
<script>
import Nav from "../../components/Nav.vue"
import Footer from "../../components/Footer"
import newsBg1 from "../../assets/bgImg/newsBg1.png"
import newsBg2 from "../../assets/bgImg/newsBg2.png"
import newsBg3 from "../../assets/bgImg/newsBg3.png"
export default {
  components: { Nav, Footer },
  data () {
    return {
      newsData: [
        {
          title: "全新首发 | AI赋能健康，助力产业升级",
          content: "11月7日至10日，由世界互联网大会和浙江省人民政府主办的2023年互联网之光博览会在乌镇盛大举行。作为互联网大会的重要组成部分，这场迎来“十年之约”，彰显...",
          time: "2024-01-24",
          bgImg: newsBg1,
          id: 0,
        },
        {
          title: "AI智能健康体验中心：健康领域的创新与变革",
          content: "近年来，AI智能健康体验中心在业界内逐渐崭露头角，以其独特的优势和价值，为医疗行业注入了新的活力。从智能诊断、精准治疗到健康管理，AI智能健康体验中心涵...",
          time: "2024-01-24",
          bgImg: newsBg2,
          id: 1,
        },
        {
          title: "银江技术智迎亚运丨健康宝HealthGPT产品正式发布，人工智能助力健康服务",
          content: "9月20日，智迎亚运，银江技术携手智慧健康运营服务平台-健康宝联合发布面向健康服务的HealthGPT产品，发布产品包括健康宝Health AI健康大模型、AI智能终端、...",
          time: "2024-01-24",
          bgImg: newsBg3,
          id: 2,
        }
      ],
    }
  },
  methods: {
    // 跳转到新闻详情
    jumpToDetail (id) {
      console.log(id)
      // this.$router.push('/newsDetail?id='+id)
      if (id == 0) {
        window.open('https://mp.weixin.qq.com/s/WVP8PVbncmdE_UZIktRUvA', '_blank');
      } else if (id == 1) {
        window.open('https://mp.weixin.qq.com/s/ppfUTk435M1MSg8VPaPGhg', '_blank');
      } else if (id == 2) {
        window.open('https://mp.weixin.qq.com/s/L1Q2NEtN_iwvCO7eZXKezg', '_blank');
      }
    },
  },
}
</script>
<style scoped lang="less">
.newsPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .winBox {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .winBox_son{
      width: 100%;
      display: flex;
      justify-content: center;
      flex: 1;
    }
    .mainBox {
      width: 1200px;
      height: 100%;
      padding-top: 50px;
      padding-bottom: 100px;
      .contentBox {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .content {
          width: 100%;
          margin-top: 100px;
          display: flex;
          justify-content: space-between;
          .newsItem {
            width: 352px;
            position: relative;
            cursor: pointer;
            z-index: 99999;
            .mask {
              width: 100%;
              height: 100%;
              background: red;
            }
            img {
              width: 100%;
            }
            .titleBox {
              display: flex;
              height: 50px;
              // padding: 0 15px;
              align-items: center;
              .newsTitle {
                font-size: 16px;
                font-weight: 500;
                flex: 1;
                flex-wrap: wrap;
              }
              img {
                width: 24px;
                height: 24px;
              }
            }
            .newsItem_line {
              width: 100%;
              height: 0px;
              opacity: 1;
              border-bottom: 1px dashed #cccce0;
            }
            .newsItem_content {
              margin-top: 10px;
              width: 100%;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #666666;
              line-height: 16px;
            }
            .newsItem_time {
              margin-top: 20px;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
    }
    .footerClass {
      width: 100%;
      // height: 340px;
    }
  }
}
</style>